<extend name="Application/Admin/View/Layout/application.html"/>

<block name="css">
    <style>
        #page2 {
            display: none;
        }
    </style>
</block>


<block name="content">
    <div class="row">
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-8">
                    <div class="page-header">
                        <h1>友情链接管理</h1>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-10">
                    <div class="panel panel-default">
                        <div class="panel-heading">友情链接</div>

                        <div class="panel-body">

                            <form class="form-horizontal" id="form" action="" method="post">


                                <div id="page1">

                                    <div class="form-group">
                                        <label  class="col-sm-2 control-label">链接1</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputEmail3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接2</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接3</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接4</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接5</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                </div>

                                <div id="page2">
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接6</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接7</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接8</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接9</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接10</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接11</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">链接12</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="inputPassword3"
                                                   placeholder="url">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox"> Remember me
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-6">
                                        <button type="button" class="btn btn-default btn-primary" disabled id="prev">
                                            后退
                                        </button>
                                        <button type="button" class="btn btn-default btn-primary" id="next">前进</button>
                                    </div>
                                </div>
                            </form>


                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</block>

<block name="js">
    <script>
        $(function () {
            var $prev = $("#prev");
            var $next = $("#next");
            var $page1 = $("#page1");
            var $page2 = $("#page2");

            $next.click(function () {
                if ($next.text() == '提交') {
                    $("#form").submit();
                    return false;
                }

                $page1.hide();
                $page2.fadeIn(300);
                $prev.prop('disabled', false);
                $next.text('提交');
            })

            $prev.click(function () {
                $page2.hide();
                $page1.fadeIn(300);
                $prev.prop('disabled', true);
                $next.text('前进');
            })
        })

    </script>
</block>